<template>
	<view class="main">
		<!-- || (!Boolean(userInfo.is_face)) && userInfo.face_switch) -->
		<block v-if="userInfo.real_name_status!=2">
			<!-- <view class="title">填写实名认证信息</view>
			<view class="des">填写的实名信息必须与登录手机号持有人相符，当前登录手机号：{{this.userInfo.mobile|formatMobile}}</view> -->
			<view class="des">
				<view class="des-icon">
				</view>
				<view class="des-title">
					根据国家相关法律法规要求，你需要填写身份证信息
					完成实名认证，以免影响使用疯传数藏相关功能或服务
				</view>
			</view>
			<view class="title">
				<view class="t1">身份证信息</view>
				<view class="t2">信息仅用于身份验证，我们将保证您的信息安全</view>
			</view>
			<u--form
				labelPosition="top" 
				labelWidth="70"
				:model="form" 
				:rules="rules" 
				errorType="toast"
				ref="uForm" 
				:labelStyle="{color:'#131415'}">
				<u-form-item prop="name" style="font-weight: 600; font-size: 28rpx;">
					<!-- <Input :islabel="false" name="请输入您身份证上的姓名" v-model="form.name" />shape -->
					<u-input placeholder="请输入真实姓名" style="padding: 28rpx 36rpx;" placeholderStyle="color: #8C93AA;font-weight: 400;" shape="circle" v-model="form.name">
						<u-icon slot="prefix" name="../../static/ico/name_icon.png" size="20"></u-icon>
					</u-input>
				</u-form-item>
				<u-form-item prop="idCard" style="font-weight: 600; font-size: 28rpx;margin-top: 10rpx;">
					<!-- <Input :islabel="false" name="请输入您的证件号" type="idcard" v-model="form.idCard" /> -->
					<u-input placeholder="请输入身份证号" style="padding: 28rpx 36rpx;" placeholderStyle="color: #8C93AA;font-weight: 400;" shape="circle" v-model="form.idCard">
						<u-icon slot="prefix" name="../../static/ico/idcard_icon.png" size="20"></u-icon>
					</u-input>
				</u-form-item>
			<!-- 	<u-form-item prop="bankcard" label="银行卡号" style="font-weight: 600; font-size: 28rpx;margin-top: 10rpx;">
					<Input :islabel="false" name="请输入您的银行卡号" v-model="form.bankcard" />
				</u-form-item> -->
			</u--form>
			<view class="submit">
				 <!-- && (Boolean(userInfo.is_face) || !userInfo.face_switch) -->
				<u-button 
				color="#468EFF"
				:disabled="userInfo.real_name_status==1||userInfo.real_name_status==2" 
				:loading="loading" 
				@click="submit">{{userInfo.real_name_status|status}}</u-button>
			</view>
		</block>
		<block v-else>
			<view class="success">
				<view class="success-header">
					<view class="success-header-ico">
						<image src="@/static/images/success_img.png" mode=""></image>
					</view>
				</view>
				<view class="success-info">
					<view class="success-info-item">
						<view class="success-info-item-title">姓名</view>
						<view class="success-info-item-cont">{{userInfo.extend_nickname|hideName}}</view>
					</view>
					<view class="success-info-item">
						<view class="success-info-item-title">身份证号</view>
						<view class="success-info-item-cont">{{userInfo.id_card}}</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import Input from '@/components/Input.vue'
	import {mixin} from '@/Mixins/mixin.js'
	import { mapState, mapMutations } from 'vuex'
	import face from '../../js_sdk/mcc-face/face.js'
	import { pathToBase64  } from 'image-tools'
	let self = null
	export default {
		mixins:[mixin],
		components:{Input},
		data() {
			return {
				form:{
					name:'',
					idCard:'',
					bankcard:''
				},
				urls: '',
				rules: {
					name: [
						{
							required: true,
							message: '请输入您身份证上的姓名',
							trigger: ['blur', 'change']
						}
					],
					idCard: [
						{
							required: true,
							message: '请输入您的证件号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.idCard(value);
							},
							message: '您输入的证件号不正确',
							trigger: ['change','blur'],
						}
					],
				},
				loading:false
			}
		},
		onReady() {
			console.log(JSON.stringify(this.userInfo));
		},
		onLoad() {
			// #ifdef APP-PLUS || APP
				face.init()
			// #endif
		},
		beforeCreate() {
			self = this
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			async submit(){
				this.$refs.uForm.validate().then(res => {
					this._submit()
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
				
			},
			async _submit(){
				try{
					this.loading = true
					let data = await this.$http({
						url:this.$api.authReal,
						method: 'POST',
						hideLoading: false,
						needToken:true,
						data:this.form
					})
					uni.showToast({
						title: data.msg,
						duration: 2000,
						icon:'none'
					});
					this.loading = false
				}catch(e){
					//TODO handle the exception
					this.loading = false
				} finally {
					this.loading = false
				}
			},
		},
		filters:{
			status(e){
				 // 0未提交 1待审核 2审核通过 3驳回
				if(e==3){
					return '未实名失败'
				}else if(e==1){
					return '认证中'
				}else if(e==2){
					// && (!Boolean(self.userInfo.is_face) || !self.userInfo.face_switch)
					return '已实名'
				}else{
					return '实名认证'
				}
			},
			formatMobile(e){
				if(e){
					var reg = /^(\d{3})\d*(\d{4})$/;
					return e.replace(reg,'$1****$2')
				}
			},
			hideName(name){
				{
				  let newStr;
				  if(!name){return ''}
				  if (name.length === 2) {
				    newStr = name.substr(0, 1) + '*';
				  } else if (name.length > 2) {
				    let char = '';
				    for (let i = 0, len = name.length - 2; i < len; i++) {
				      char += '*';
				    }
				    newStr = name.substr(0, 1) + char + name.substr(-1, 1);
				  } else {
				    newStr = name;
				  }
				  return newStr;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		// min-height: 100vh;
		background-color:$nft-bg-color;
		box-sizing: border-box;
		padding: 30rpx;
		.title{
			margin-bottom: 85rpx;
			.t1 {
				font-size: 48rpx;
				color: #16172F;
				font-weight: 600;
			}
			.t2 {
				font-size: 28rpx;
				font-weight: 400;
				color: #8C93AA;
			}
		}
		.des{
			display: flex;
			align-items: center;
			padding: 30rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			background-color: #F5F9FF;
			line-height: 42rpx;
			margin-bottom: 60rpx;
			margin-top: 32rpx;
			&-icon {
				width: 52rpx;
				height: 64rpx;
				background: url(@/static/ico/safe.png)left center no-repeat;
				background-size: 26rpx 32rpx;
				// margin-left: 20rpx;
			}
			&-title {
				margin-left: 20rpx;
				color: #8C93AA;
				font-size: 24rpx;
			}
		}
		.u-input {
			border: 1rpx solid #EBEBED;
		}
		.tips{
			// background: url(@/static/ico/safe.png)left center no-repeat;
			// background-size: 26rpx 32rpx;
			background-color: #F5F9FF;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			// padding-left: 36rpx;
			padding: 24rpx;
			margin-top: 30rpx;
		}
		.submit{
			margin-top: 92rpx;
			::v-deep button{
				height: 80rpx;
				background: #000;
				border-radius: 14rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #FFF;
			}
		}
		.success{
			margin-top: 200rpx;
			&-header{
				text-align: center;
				&-ico{
					width: 324rpx;
					height: 284rpx;
					margin:0 auto;
					image{
						width: 100%;
						height: 100%;
					}
				}
				&-title{
					font-size: 32rpx;
					font-weight: 600;
					color: #000;
					line-height: 44rpx;
					margin-top: 18rpx;
				}
			}
			&-info{
				margin-top: 78rpx;
				padding: 22rpx 46rpx 0rpx 32rpx;
				background: #F7F8FA;
				border-radius: 8rpx;
				&-tips{
					text-align: right;
					text{
						background: url(@/static/ico/safe.png)left center no-repeat;
						background-size: 26rpx 32rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999;
						line-height: 34rpx;
						padding-left: 36rpx;
					}
				}
				&-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 44rpx 36rpx;
					&:nth-child(1) {
						border-bottom: 1rpx solid #EBEEF5;
					}
					&-title{
						font-size: 24rpx;
						font-weight: 400;
						color: #8C93AA;
						line-height: 34rpx;
					}
					&-cont{
						font-size: 28rpx;
						font-weight: 600;
						color: #16172F;
						line-height: 40rpx;
					}
				}
			}
		}
	}
</style>
